<template>
    <div class="h-88">
      <el-card class="m-h-100">
      <div
        slot="header"
        class="d-md-flex justify-content-between align-items-center"
      >
        <div>{{ $t('certificate.router.risk') }}</div>
        <el-button
          type="primary"
          plain
          icon="el-icon-circle-plus-outline"
          v-has="'riskTypeCreate'"
          @click="formDialog()"
          >{{ $t('certificate.global.addBtn') }}</el-button
        >
      </div>
      <el-tabs v-model="searchForm.status" @tab-click="handleClick" type="card">
        <el-tab-pane :label="$t('certificate.template.using')" name="0"></el-tab-pane>
        <el-tab-pane :label="$t('certificate.template.deleted')" name="1"></el-tab-pane>
    </el-tabs>
      <el-form :inline="true" :model="searchForm" label-width="auto">
        <el-form-item :label="$t('certificate.global.corpName')">
          <el-select
            v-model="searchForm.corpCode"
            class="w-100"
            :placeholder="$t('certificate.global.selectTips')"
            clearable
          >
            <el-option
              v-for="item in options.corp"
              :key="item.corpCode"
              :label="item.corpName"
              :value="item.corpCode"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('certificate.global.name')">
          <el-input
            v-model="searchForm.name"
            clearable
            :placeholder="$t('certificate.global.enterName')"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="
              tableLoad = true;
              getList();
            "
            >{{ $t('global.searchBtn') }}</el-button
          >
        </el-form-item>
      </el-form>
      
      <tables
        ref="tables"
        :tableColumn="tableColumn"
        :formData="searchForm"
        @listData="getDataList"
        @getData="(ruleForm) => data = ruleForm"
        :mold="1"
      >
        <template #corpCode="{ data }">
            <dict-tag :options="options.corp" :value="data.corpCode"></dict-tag>
        </template>

        <template #name="{ data, index }">
          <span v-if="checkBtn('riskTypeList')&&searchForm.status==0" class="text-primary cursor-pointer" @click="formDialog(index)">{{data.name}}</span>
          <span v-else>{{ data.name }}</span>
        </template>

        <template #type="{ data }">
            <span
                v-for="item in options.type"
                :key="item.uuid"
            >
              <span v-if="item.uuid == data.typeUuid">
                  {{ item.name }}
              </span>
            </span>
        </template>
        <template #belongNumber="{ data, index }">
          <el-button type="text" :class="data.isAuditNums==0 ? 'text-danger' : ''" @click="checkArea(data.uuid)">
            {{  data.isAuditNums > 0 ?  $t('certificate.global.view') : $t('certificate.global.noconfig') }} 
          </el-button>
        </template>
        <template #remark="{ data }">
          {{ data.remark ? data.remark : $t('certificate.global.noRemark') }}
        </template>  
   
        <template #qrCode="{ data }">
          <el-image
            style="width: 80px; height: 80px"
            :src="data.qrCode"
            :preview-src-list="[data.qrCode]"
          >
          </el-image>
        </template>


        
      <!-- <template #form="{ data, index }" >
        <span class="cursor-pointer" @click="cusForm(index,data.uuid,data.formUuid)">
            <div class="text-primary"  v-if="data.formUuid">
              {{ $t('certificate.global.view') }}
            </div>
            <div class="text-danger " v-else>
                未创建
            </div>
          </span>
      </template> -->

<!--               
      <template #exitForm="{ data, index }" >
        <span class="cursor-pointer" @click="riskExitForm(index,data.uuid,data.exitFormUuid)">
            <div class="text-primary"  v-if="data.exitFormUuid">
              {{ $t('certificate.global.view') }}
            </div>
            <div class="text-danger " v-else>
                未创建
            </div>
          </span>
      </template> -->

        <template #destroy="{ data, index }" v-if="checkBtn('riskTypeDestroy') && searchForm.status==0">
          <el-button
            type="text"
            class="text-red"
            icon="el-icon-delete"
            @click="destroy(index, data.uuid)"
            >{{ $t('global.destroy') }}</el-button
          >
        </template>
      </tables>
    </el-card>
      <!-- 添加修改 -->
      <formDialog
        ref="formDialog"
        @listUpdate="listUpdate"
      ></formDialog>

      <!-- <cusForm
        ref="cusForm"
        @submit='formUpdate'
      ></cusForm> -->
      <selectUser ref="selectUser" 
        :tableColumn="selectColumn" 
        @submit="handleUserSubmit"
      ></selectUser>
      <!-- 添加修改 -->
      <!-- <item
        ref="item"
        @close="changeCount"
      ></item> -->

    </div>
  </template>
  <style lang="scss" scoped>
  </style>
  <script>
  // import item from "./components/index/item.vue";
    import selectUser from "@/views/certificate/components/selectUser.vue"
  import formDialog from "./components/type/formDialog.vue";
  import { apiRequests } from "../api/risk/type";
  export default {
    components: {
      formDialog,
      // cusForm,
      selectUser
      // item,
    },
    data() {
      return {
        options: {
          corp:[],
        },
        searchForm: {
          status:'0',
        },
        index: "",
        data:{},
        tableColumn: [
            {
              slotName: "corpCode",
              label: this.$t("certificate.global.corpName"),
            },
            {
              label: this.$t("certificate.global.name"),
              slotName: "name",
            },
            // {
            //   slotName: "status",
            //   label: this.$t("certificate.global.status"),
            //   width: 100,
            // },

            {
              slotName: "form",
              label: this.$t("certificate.global.form"),
              width: 100,
            },
            {
              slotName: "belongNumber",
              label: this.$t("certificate.risk.belongNumber"),
            },
            // {
            //   slotName: "qrCode",
            //   label: this.$t("certificate.global.qrCode"),
            //   width: 200,
            // },
            {
              label: this.$t("certificate.global.remark"),
              slotName: "remark",
              
            },
            {
              prop: "inDate",
              sortable:true,
              label: this.$t("certificate.global.inDate"),
            },
            // {
            //   slotName: "exitForm",
            //   label: this.$t("certificate.template.exitForm"),
            //   width: 100,
            // },
            {
              label: this.$t("global.destroy"),
              slotName: "destroy",
              align: "center",
              width: 100,
            },
        ],
        selectColumn:[
            {
                label: this.$t('certificate.global.userName'),
                prop: "workerName",
            },
            {
                label: this.$t('certificate.area.permis'),
                prop: "isAudit",
                scope: "checked",
            },
        ],
        url:{
            risk:'certificate/admin/v1/risk/type/getWorkerAuthList'
        }
      }
    },
    methods: {
      // cusForm(index,uuid,formUuid){
      //   this.$refs.tables.getData(index)
      //   this.$refs.cusForm.show('risk',uuid,formUuid);
      // },
      riskExitForm(index,uuid,formUuid){
        this.$refs.tables.getData(index)
        // this.$refs.cusForm.show('riskExit',uuid,formUuid);
      },
    formUpdate(res){
      let data  = {...this.data,...res};
      this.$refs.tables.handleSave(data)
    },
      // //打开检修列表弹窗
      // itemDialog(index) {
      //   this.index = index;
      //   this.$refs.item.show(this.list[index].uuid,this.searchForm.status)
      // },
      // changeCount(count){
      //   this.list[this.index].itemCount = count;
      // },
      getDataList(list , other){
        this.list = list;
      }, 
      checkArea(uuid){
        this.$refs.selectUser.init(this.url.risk,uuid);
      }, 
      handleClick() {
        this.$refs.tables.searchForm.page = 1;
        this.getList();
      },
      //异步获取信息
      getList() {
        this.$refs.tables.getList('/getList','risk/type');
      },
      handleUserSubmit(uuid,value){
        apiRequests.changeWorkerAuth({'uuid':uuid,'value':value}).then((res) => {
            this.$refs.selectUser.handleClose()
        }).catch(()=>{
            this.$refs.selectUser.pageLoad = false;
        })
      },
      //打开form表单弹窗
      formDialog(index) {
        this.$refs.tables.getData(index)
        this.$refs.formDialog.show(this.data);
      },

      //通过子组件修改父子件数据
      listUpdate(ruleForm) {
        this.$refs.tables.handleSave(ruleForm)
      },
            // 删除
      destroy(index,uuid){
        this.$refs.tables.destroy(index,uuid);
      },

       getPageData() {
        this.getOption();
        this.getList()
      },
       getOption() {
        apiRequests.getOptions().then(res=>{
          this.options = res.data
        })
      },
    },
    mounted() {
      this.getPageData();
    },
  };
  </script>
  